<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./css/equip/equip.css">
  <script src="./public/jQuery.min.js"></script>
  <link rel="stylesheet" href="./public/swiper-bundle.min.css">
  <!-- jq -->
  <script src="./public/jQuery.min.js"></script>
  <!-- jq -->
  <!-- 轮播图 -->
  <link rel="stylesheet" href="../public/swiper-bundle.min.css">
  <script src="../public/swiper-bundle.min.js"></script>
  <!-- 轮播图 -->
  <title>找装备</title>
</head>

<body>
  <div id="equip">
    <!-- 头部  -->
    <div class="header">
      <equipheader></equipheader>
    </div>
    <!-- 头部  -->
    <!-- body -->
    <div class="equip">
      <!-- 搜搜 -->
      <div class="searchbox">
        <div class="sleft">
          <img src="./img/equip/slogo.png" alt="">
        </div>
        <div class="scenter">
          <div class="camer">
            <input type="text" class="scinput" placeholder="请输入产品名称">
            <img src="./img/equip/camer.png" alt="">
          </div>
          <button class="scbut">
            <img src="./img/equip/fangda.png" alt="">
          </button>
        </div>
        <div class="sright">
          <div class="shop">
            <img src="./img/equip/shop.png" alt="">
          </div>
          <p class="shoptit">
            <a href="#">购物车</a>
          </p>
        </div>
      </div>
      <!-- 搜搜 -->
      <!-- 第二层 -->
      <div class="equipnav">
        <div class="navlist">
          <p class="listtit">找装备</p>
          <div class="food">
            <img src="./img/equip/camer.png" alt="">
            <p class="fooftit">
              <a href="#">餐具/锅具/炊具</a>
            </p>
          </div>
          <div class="food">
            <img src="./img/equip/camer.png" alt="">
            <p class="fooftit"><a href="">工具箱/钉锤/推车</a></p>
          </div>
          <div class="food">
            <img src="./img/equip/camer.png" alt="">
            <p class="fooftit"><a href="">帐篷/睡袋/充气床</a></p>
          </div>
          <div class="food">
            <img src="./img/equip/camer.png" alt="">
            <p class="fooftit"><a href="">背包/登山鞋/冲锋衣</a></p>
          </div>
          <div class="morebox">
            <div class="content">
              <div class="food">
                <img src="./img/equip/camer.png" alt="">
                <p class="fooftit"><a href="">餐具/锅具/炊具</a></p>
              </div>
              <!-- <div class="food">
                <img src="./img/equip/camer.png" alt="">
                <p class="fooftit"><a href="">帐篷/睡袋/充气床</a></p>
              </div> -->
            </div>
            <p class="more">查看更多</p>
            <div class="arrow">
              &#9660;
            </div>
          </div>
        </div>
        <div class="navswiper">
          <div class="swiper">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" style="position: relative;">
                  <img src="./img/equip/bgimg.png" alt="" style="width: 100%;max-width: 100%;">
                </div>
                <div class="swiper-slide">
                  <img src="./img/equip/bgimg.png" alt="" style="width: 100%;max-width: 100%;">
                </div>
                <div class="swiper-slide">
                  <img src="./img/equip/bgimg.png" alt="" style="width: 100%;max-width: 100%;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="navshop">
          <div class="shopimg">
            <img src="./img/equip/shop1.png" alt="">
          </div>
          <div class="shopimg">
            <img src="./img/equip/shop2.png" alt="">
          </div>
          <div class="shopimg">
            <img src="./img/equip/shop3.png" alt="">
          </div>
          <div class="shopimg">
            <img src="./img/equip/shop1.png" alt="">
          </div>
        </div>
        <div class="navright">
          <div class="navrbox">
            <p><a href="#">营地秒杀</a></p>
          </div>
          <div class="navrbox">
            <p>
              <a href="#">猜你喜欢</a>
            </p>
          </div>
          <div class="navrbox">
            <p><a href="#">营地反馈</a></p>
          </div>
          <div class="navrbox">
            <p><a href="#">返回顶部</a></p>
          </div>
        </div>
      </div>
      <!-- 第二层 -->
      <!-- 营地秒杀 -->
      <div class="killbox">
        <div class="kill">
          <p class="killtit">营地秒杀</p>
          <div class="killimg">
            <img src="./img/equip/blogo.png" alt="">
          </div>
          <p class="killtime"><span>18:00</span> 点场 距结束</p>
          <p class="killdata"><span class="killtext">00</span>:<span>10</span>:<span>12</span></p>
        </div>
        <div class="killswiper">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" style="display: flex;justify-content: space-between;">
                <div class="tent">
                  <div class="tentimg">
                    <img src="./img/equip/kill1.png" alt="">
                  </div>
                  <p class="tenttit">帐篷帐篷帐篷帐篷帐篷篷帐篷帐篷帐篷帐</p>
                  <button class="tentbut" id="button1">立即抢购</button>
                </div>
                <div class="tent">
                  <div class="tentimg">
                    <img src="./img/equip/kill2.png" alt="">
                  </div>
                  <p class="tenttit">睡袋</p>
                  <button class="tentbut" id="button2">立即抢购</button>
                </div>
                <div class="tent">
                  <div class="tentimg">
                    <img src="./img/equip/kill3.png" alt="">
                  </div>
                  <p class="tenttit">折叠椅</p>
                  <button class="tentbut" id="button3">立即抢购</button>
                </div>
                <div class="tent">
                  <div class="tentimg">
                    <img src="./img/equip/kill4.png" alt="">
                  </div>
                  <p class="tenttit">餐锅具</p>
                  <button class="tentbut" id="button4">立即抢购</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 营地秒杀 -->
      <!-- 猜你喜欢 -->
      <div class="like">
        <p class="tit">猜你喜欢</p>
        <div class="likecontent">
          <div class="likebox">
            <div class="likeone">
              <div class="liketitbox">
                <p class="liketit">营地座椅</p>
                <p class="liketext">找装备 买好货</p>
              </div>
              <div class="likeimg">
                <img src="./img/equip/yizi.png" alt="">
              </div>
            </div>
          </div>
          <div class="likeboxtwo">
            <div class="liketwo">
              <div class="liketitbox">
                <p class="liketit2">营地座椅</p>
                <p class="liketext">找装备 买好货</p>
              </div>
              <div class="likeimg">
                <img src="./img/equip/computer.png" alt="">
              </div>
            </div>
          </div>
          <div class="book">
            <div class="booktop">
              <div class="booktitbox">
                <p class="booktit">户外运动</p>
                <p class="bookp">优惠式一战购</p>
              </div>
              <div class="bookimg">
                <img src="./img/equip/yinliao.png" alt="">
              </div>
            </div>
            <div class="booktop">
              <div class="booktitbox">
                <p class="booktit">户外图书</p>
                <p class="bookp">优惠式一战购</p>
              </div>
              <div class="bookimg">
                <img src="./img/equip/shu.png" alt="">
              </div>
            </div>
          </div>
          <!-- 第四列鞋子 -->
          <div class="book">
            <div class="shoetop">
              <div class="shoetitbox">
                <p class="shoetit">户外运动</p>
                <p class="shoep">优惠式一战购</p>
              </div>
              <div class="shoeimg">
                <img src="./img/equip/xie.png" alt="">
              </div>
            </div>
            <div class="shoetop">
              <div class="shoetitbox">
                <p class="shoetit">户外图书</p>
                <p class="shoep">优惠式一战购</p>
              </div>
              <div class="shoeimg">
                <img src="./img/equip/xie.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
    </div>
    <!-- body -->
    <!-- 脚部 -->
    <div class="footer">
      <footer></footer>
    </div>
    <!-- 脚部 -->
  </div>

     
  <script>
    // 头部尾部
    $(function () {
      $("equipheader").load("./components/equipheader.html")
      $("footer").load("./components/footer.html")
    });
    // 头部尾部
    // 查看更多
    const container = document.querySelector('.navlist');
    const content = document.querySelector('.content');
    const arrow = document.querySelector('.arrow');
    const more = document.querySelector('.more');
    let isContentVisible = false;

    more.addEventListener('click', () => {
      if (isContentVisible) {
        content.style.maxHeight = '0';
        arrow.innerHTML = '&#9660;';
        more.style.display = 'block'

      } else {
        content.style.maxHeight = '200px'; // 调整内容的最大高度
        arrow.innerHTML = '&#9650;';
        more.style.display = 'none'

      }
      isContentVisible = !isContentVisible;
    });
    arrow.addEventListener('click', () => {
      if (isContentVisible) {
        content.style.maxHeight = '0';
        arrow.innerHTML = '&#9660;';
        more.style.display = 'block'

      } else {
        content.style.maxHeight = '200px'; // 调整内容的最大高度
        arrow.innerHTML = '&#9650;';
        more.style.display = 'none'

      }
      isContentVisible = !isContentVisible;
    });
    // 查看更多

     // kill轮播图
     var swiper2 = new Swiper('.swiper-container:nth-child(2)', {
      pagination: '.swiper-pagination',
      slidesPerView: 4,
      paginationClickable: true,
      spaceBetween: 3,
      loop: true,

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
        clickable: true,
      },
      // 其他配置选项...
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })
    // kill轮播图
    // 轮播图
    var swiper1 = new Swiper('.swiper-container:nth-child(1)', {
      direction: 'horizontal', // 水平切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 1500,//1秒切换一次
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
        clickable: true,
      },
      // 其他配置选项...
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    })
    // 轮播图
   
    // 抢购
    // 获取四个按钮元素
    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');
    var button3 = document.getElementById('button3');
    var button4 = document.getElementById('button4');

    // 添加点击事件处理程序
    button1.addEventListener('click', function () {
      alert('抢购成功！');
    });

    button2.addEventListener('click', function () {
      alert('抢购成功！');
    });

    button3.addEventListener('click', function () {
      alert('抢购成功！');
    });

    button4.addEventListener('click', function () {
      alert('抢购成功！');
    });
    // 抢购

  </script>
</body>

</html>
